<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
  <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      justify-content: space-between;
      /* align-items:right; */
    }
    /* 248  350.8 */
    /* <!-- 2480 3508 --> */
    #app {
      width:1240px;
      height:1754px;
      box-sizing: border-box;
      position: relative;
    }
    #qrcode {
      width:448px;
      height:448px;
      position: absolute;
      z-index: 2;
      top: 1364px;
      right: 65px;
      transform: scale(0.5);
      transform-origin: 100% 0px;
    }

    .bgimage {
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    #left {
      width: 350px;
      height:1400px;
      display: flex;
      align-items:flex-end;
    }

    .input {
      height: 30px;
      width: 250px;
      font-size: 20px;
    }
    #info {
      width:220px;
      height: 100px;
      position: absolute;
      top: 1600px;
      right:66px;
    }

    #name {
      text-align: center;
      font-size: 18px;
      color: #e52321;
    }

    #adress {
      text-align: center;
      font-size: 14px;
      color: #e52321;
    }

    #btn {
      width: 80px;
      height: 30px;
    }
  </style>
</head>


<body>
  <div id="app">
    <image class="bgimage" src="./qcodebg.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror=""
      bindload="" />
    <div id="qrcode"></div>
    <div id="info">
      <div id="name"></div>
      <div id="adress"></div>
    </div>
  </div>
  <div id="left">
    <ul>
      <li><span>sopId:</span><input class="input" value="" /></li>
      <li><span>店铺名:</span><input class="input" value="" /></li>
      <li><span>商家地址:</span><input class="input" value="" /> </li>
    </ul>
    <button type="button" id="btn" onclick="rest()">切换</button>
  </div>
  <!-- text        : "https://github.com/jeromeetienne/jquery-qrcode"  //设置二维码内容    
render      : "canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）   
width       : 256,     //设置宽度    
height      : 256,     //设置高度    
typeNumber  : -1,      //计算模式    
correctLevel: 0,//纠错等级    
background  : "#ffffff",//背景颜色    
foreground  : "#000000" //前景颜色   -->
  <!-- 
// let img=new Image()
// // img.setAttribute("crossOrigin",'Anonymous');
// img.src ="./qcodebg.jpg";
// $("body").append(img); -->
  <script>
    var name = '我是示例'
    var adress = '我是示例'
    var shopId = '220854931912392704'
    let uri = utf16to8("http://www.yuke520.com/#/register?refType=1&refId=" + shopId)
    function utf16to8(str) {
      var out, i, len, c;
      out = "";
      len = str.length;
      for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
          out += str.charAt(i);
        } else if (c > 0x07FF) {
          out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
          out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        } else {
          out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        }
      }
      return out;
    }
    //二维码编码前把字符串转换成UTF-8      
    function setText() {
      $('#name')[0].innerText = name
      $('#adress')[0].innerText = adress
    }
    function getcode() {
      $('#qrcode').qrcode({
        render: "canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）  
        width:448,//宽度
        height:448,//高度
        correctLevel: 0,//纠错等级  
        text: uri,//生成二维码的文本
        background: "#fff",//背景色
        foreground: "#333",//前景色
      });
    }
    window.onload = () => {
      getcode()
      setText()
    }
    function rest() {
      shopId = $('input')[0].value
      let cookie='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJBZG1pbiIsInNjb3BlIjpbIioiXSwibG9naW5OYW1lIjoiQWRtaW4iLCJleHAiOjE2MDgwMDUxMzYsImF1dGhvcml0aWVzIjpbIjEiLCI3Il0sImp0aSI6IjY2MDg5ZmUwLWYzNGMtNGEwMy1hYThmLTRkYjI5NGQ5NDQwMyIsImNsaWVudF9pZCI6Inl1a2UtY2xpZW50LXVhYyIsInRpbWVzdGFtcCI6MTYwNzk5NzkzNjY2M30.6quGc91WcavkugCxoybgnpk_VgfHlQHy3_ikmGRBnbk'
      $.ajax({
        url: 'http://api.yuke520.com/smc/shop/' + shopId,
        method:'GET',
        headers: {
          'Content-Type': 'application/json;charset=utf8',
          'Authorization': "Bearer " + cookie 
        },
        success:function(data){
          console.log('data',data);
          adress=data.result.regionCityName+data.result.regionCountyName+data.result.address
          name=data.result.shopName
          if ($('input')[1].value!='') {
            name=$('input')[1].value
          }
          if ($('input')[2].value!='') {
            adress=$('input')[2].value
          }
          uri=utf16to8("http://www.yuke520.com/#/register?refType=1&refId="+shopId)
          $('canvas')[0].parentNode.removeChild($('canvas')[0]);
          getcode()
          setText()
        },
        error:function(error){
          console.log('error','可能需要改了',error);
        }
      })
    }
  </script>
</body>

</html>